<style lang="less">
@import "./login.less";
</style>

<template>
<div class="login" @keydown.enter="handleSubmit">
    <div class="login-con">
        <Card :bordered="false">
            <p slot="title">
                <Icon type="log-in"></Icon>
                欢迎登录
            </p>
            <div class="form-con">
                <Form ref="loginForm" :model="form" :rules="rules">
                    <FormItem prop="userName">
                        <Input v-model="form.userName" placeholder="请输入用户名">
                        <span slot="prepend">
                                    <Icon :size="16" type="person"></Icon>
                                </span>
                        </Input>
                    </FormItem>
                    <FormItem prop="password">
                        <Input type="password" v-model="form.password" placeholder="请输入密码">
                        <span slot="prepend">
                                    <Icon :size="14" type="locked"></Icon>
                                </span>
                        </Input>
                    </FormItem>
                    <FormItem>
                        <Button @click="handleSubmit" type="primary" long>登录</Button>
                    </FormItem>
                </Form>
            </div>
        </Card>
    </div>
    <Modal title="请选择登录角色" v-model="rolemodal" :mask-closable="false" @on-ok="login">
        <RadioGroup v-model="loginrole" vertical>
            <Radio label="工厂">
                <Icon type="ios-gear-outline"></Icon>
                <span>工厂</span>
            </Radio>
            <Radio label="经销商">
                <Icon type="ios-world-outline"></Icon>
                <span>经销商</span>
            </Radio>
            <Radio label="终端门店">
                <Icon type="ios-medical-outline"></Icon>
                <span>终端门店</span>
            </Radio>
        </RadioGroup>
    </Modal>
</div>
</template>

<script>
import Cookies from "js-cookie";
export default {
  data() {
    return {
      form: {
        userName: "",
        password: ""
      },
      rules: {
        userName: [
          {
            required: true,
            message: "账号不能为空",
            trigger: "blur"
          }
        ],
        password: [
          {
            required: true,
            message: "密码不能为空",
            trigger: "blur"
          }
        ]
      },
      loginrole: "工厂",
      rolemodal: false
    };
  },
  methods: {
    handleSubmit() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          Cookies.set("user", this.form.userName);
          //增加选择角色
          this.rolemodal = true;
        }
      });
    },
    login() {
      //存储角色信息
      Cookies.set("role", this.loginrole);
      this.$router.push({
        name: "home_index"
      });
    }
  }
};
</script>

<style>

</style>
